<template>
  <div class="add_new">
    <el-dialog
      v-model="props.dialogVisible"
      title="新增角色"
      width="30%"
      :before-close="handleClose"
    >
      <div class="container">
        <div class="role_name">
          <el-form ref="formRefs" :model="form" label-width="80px" :rules="rules">
            <el-form-item label="角色名" prop="roleName">
              <el-input v-model="form.roleName" />
            </el-form-item>
          </el-form>
        </div>
        <div class="role_list">
          <div style="text-align: center">添加权限</div>
          <div>
            <el-tree
              :data="mainChildren"
              show-checkbox
              node-key="path"
              :props="defaultProps"
              :default-checked-keys="['/main/project', '/main/project/vue3_cms']"
              @check="checkChange"
            />
          </div>
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submit"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { FormInstance, FormRules } from 'element-plus';
import { registApi, editUserApi } from '@/service/api';
import { base, uploadUrl } from '@/service/config';
import mainChildren from '@/router/mainChildren';

const defaultProps = {
  children: 'children',
  label: (data, node) => {
    return data.meta.name;
  }
};

const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  }
});
const form = reactive({
  roleName: ''
});
const rules = reactive<FormRules>({
  roleName: [{ required: true, message: '角色名称名不能为空', trigger: 'blur' }]
});

const checkedKey = ref([1]);
let checkList: string[] = [];
const submit = () => {
  console.log(checkedKey.value);
};
const checkChange = (checkedNodes) => {
  if (checkList.includes(checkedNodes.path)) {
    checkList.splice(
      checkList.findIndex((i) => i === checkedNodes.path),
      1
    );
  } else {
    checkList.push(checkedNodes.path);
  }
  console.log(checkList);
};

// const dialogVisible = ref<boolean>(false);
const emit = defineEmits(['update:dialogVisible']);

const handleClose = () => {
  emit('update:dialogVisible', false);
};
</script>

<style scoped lang="less">
.add_new {
  .container {
    .role_name {
      margin-bottom: 15px;
    }
  }
}
</style>
